<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link href="static/vendor/element-ui@2.15.9/lib/theme-chalk/index.css" rel="stylesheet" />
  <link href="static/eladmin/css/eladmin.min.css" rel="stylesheet" />
</head>

<body>
  <div id="app" class="login-page" :style="`background-image: url(&quot;${bgImg}&quot;);`" v-cloak>
    <el-card shadow="always">
      <h1 class="text-center fs-5">欢迎使用后台管理系统</h1>
      <el-form ref="form" :rules="formRules" :model="formData" size="small">
        <el-form-item prop="user_name">
          <el-input placeholder="用户名" prefix-icon="el-icon-user" v-model="formData.user_name" clearable autofocus
            maxlength="16">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" prefix-icon="el-icon-lock" v-model="formData.password" show-password clearable
            maxlength="16">
          </el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <div class="d-flex justify-content-between align-items-center">
            <el-input placeholder="验证码" prefix-icon="el-icon-picture-outline" v-model="formData.captcha" clearable
              maxlength="4" @change="onLogin()">
            </el-input>
            <captcha-image ref="captcha" :height="30" :is-debug="true" super-code="o01l"></captcha-image>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loadingState.login" @click="onLogin()" @keyup.enter="onLogin()">立即登录
          </el-button>
          <el-button :loading="loadingState.forgetPassword" @click="onForgetPassword()">忘记密码？</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <script src="static/vendor/vue@2.6.14/dist/vue.min.js"></script>
  <script src="static/vendor/element-ui@2.15.9/lib/index.js"></script>
  <script src="static/vendor/axios@0.27.2/dist/axios.min.js"></script>
  <script src="static/vendor/mockjs@1.1.0/dist/mock.js?v=1.0.0"></script>
  <script src="static/js/utils.min.js"></script>
  <script src="static/mock/admin/api-route.js?v=1.0.0"></script>
  <script src="static/mock/admin/index.js?v=1.0.0"></script>
  <script src="static/eladmin/js/elcomponents.min.js"></script>
  <script>

    // 使用模拟数据
    // useMockData();

    /**
    * 登录组件
    * @description 登录员组件
    */
    const App = {
      el: '#app',
      name: "Login",
      data() {
        return {
          // 背景图片
          bgImg: "",
          // 表单数据
          formData: {
            user_name: "admin",
            password: "000",
            captcha: "o01l",
          },
          // 表单校验规则
          formRules: {
            user_name: [
              { required: true, message: "请输入账号", trigger: "blur" },
              {
                min: 3,
                max: 16,
                message: "长度在 3 到 16 个字符",
                trigger: "blur",
              },
            ],
            password: [
              { required: true, message: "请输入密码", trigger: "change" },
              {
                min: 3,
                max: 16,
                message: "长度在 3 到 16 个字符",
                trigger: "blur",
              },
            ],
            captcha: [
              { required: true, message: "请输入验证码", trigger: "change" },
              { length: 4, message: "长度为 4 个字符", trigger: "blur" },
            ],
          },
          // 加载状态
          loadingState: {
            login: false,
            forgetPassword: false,
          },
        };
      },
      methods: {
        // 加载视图数据
        loadData() {
          let n = Math.ceil(Math.random() * 27);
          this.bgImg = `../../static/images/loginbg/${n}.jpg`;
        },
        // 登录操作
        onLogin() {
          this.$refs.form.validate((valid) => {
            console.log("校验结果", valid);
            if (!valid) {
              return false;
            }
            if (!this.$refs.captcha.check(this.formData.captcha)) {
              this.$message.error("验证码无效");
              this.$refs.captcha.refresh();
              this.formData.captcha = "";
              return;
            }
            this.loadingState.login = true;
            this.vuiAjax.post(this.apiRoute.login, this.formData).then(
              msgInfo => {
                this.loadingState.login = false;
                if (!msgInfo.success) {
                  this.$message.error(msgInfo.message);
                  return;
                }
                LoginState.setLoginInfo(msgInfo.data);
                location.href = "index.html"
              }
            ).catch(msgInfo => {
              this.loadingState.login = false;
              this.$message.error(msgInfo.message);
            })
          });
        },
        // 忘记密码操作
        onForgetPassword() { },
      },
      mounted() {
        this.loadData();
      },
    }

    // 全局加载组件
    Vue.use(ElComponents);
    Vue.prototype.apiRoute = new ApiRoute();
    // 获取标准消息格式的 axios 实例
    Vue.prototype.vuiAjax = EsUtils.getStdAjax();
    // 创建应用实例
    var app = new Vue(App)
  </script>
</body>

</html>